<template>
	<view class="material-category" align="left">
		    <view style="float: left" >
		      <van-sidebar v-model="activeKey">
		        <van-sidebar-item v-for="arr in leaseList" :title="arr.teamName" :key="arr.teamId" @click="onChange(arr.teamId)"/>
		      </van-sidebar>
		    </view>
		    <view class="material-category-content">
		      <view class="material-category-contents">
				<view>
					<view style="float: left;margin-left: 10px;" v-for="value in items" :key="value.rentalId" @click="categoryDetails(value.rentalId,value.rentalName)">
						<image src="https://img.yzcdn.cn/vant/cat.jpeg" fit="cover" style="width: 120px;height: 120px;"></van-image>
						<view style="font-size: 0.6rem;padding-top: 0.4rem;text-align: center;">{{value.rentalName}}</view>
					</view>
				</view>
		      </view>
		    </view>
	</view>
</template>

<script>
	import {
	  getLeaseList,
	  selectRentalServiceList
	} from '@/api/constructionTeam/rental.js'
	export default {
		data() {
			return {
				activeKey: 0,
				leaseList: [
				
				],
				items: [
					
				],
				categoryId :null,
				typeid:0,
				
				
			}
		},
		onLoad(openid) {
			this.typeid = openid.typeid
			console.log(openid.id)
			this.distinguish(openid.typeid)
			console.log(this.typeid)
		},
		created() {
			
		},
		methods: {
			 onChange(index) {
				 console.log("我是切换侧边导航 id="+index)
			        this.getListAll(index);
			      },
				distinguish(id){
						this.getList()
			      },
			      categoryDetails(id,name){
					  uni.navigateTo({
					  	url:'../index_category_details/index_category_details?categoryId='+id+'&categoryName='+name
						//url:'../index_category_details/index_category_details'
					  })
			      },
				  
				  // 查询建房主材类别列表
				  getList(){
				    getLeaseList().then((res) => {
						console.log(res.data.data)
						 this.leaseList = res.data.data;
						this.categoryId = res.data.data[0].teamId;
						this.getListAll(this.categoryId)
				    });
				  },
				  
				  getListAll(id){					  
					    selectRentalServiceList(id).then((res) => {		
							console.log(res.data.data)
					              this.items = res.data.data;
					});
				  }
		}
	}
</script>

<style>
	.demo-nav{
	    position: relative;
	    display: flex;
	    -webkit-box-align: center;
	    align-items: center;
	    -webkit-box-pack: center;
	    justify-content: center;
	    height: 45px;
	    background-color: #fff;
	    font-size: 1.1rem;
	  }
	  .demo-nav__back{
	    position: absolute;
	    top: 12px;
	    left: 16px;
	    width: 24px;
	    height: 24px;
	    cursor: pointer;
	  }
	  .material-category-content{
	    margin-left: 80px;
	    padding: 0.5rem;
	  }
		.sideCilck:hover{
			background-color: red($color: #000000);
		}
</style>
